<template>
<view>
<!--pages/topicality/gaokao/gkfenshuxian/school.wxml-->
<!--<import src="../../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
 <view>
    <image src="http://imgbdb3.bendibao.com/xcx/20207/10/2020710143155_24466.png" class="main-img">
    </image>
    <view style="position: absolute;top:235rpx;width:95%;" v-if="quList">
      <view class="change-city">  
        <!-- 区域 -->
        <view class="quyu-box">
          <view class="qtitle">区域：</view>
          <!-- <view class="qucont"> -->
            <view v-for="(item, index) in quList" :key="index" :class="item.checked?'qtextsel':'qtext'" @tap="quselBtn" :data-name="item.cityname">{{item.cityname}}</view>
          <!-- </view> -->
        </view>
      </view>
      <!-- 内容 -->
      <view class="xqcontent">
       <view v-for="(list, index) in listData" :key="index" class="fenshu-box">
      <view class="school-title" @tap="bindClick" :data-index="index">
        <view class="school-box">
          <image src="/static/images/sys/xf_icon2.png"></image>
          <text>{{list.qu}}地区录取分数线</text>
        </view>
        <image class="xqicon" :src="list.showSpread?'/static/images/sys/shang.png':'/static/images/sys/xia.png'"></image>
      </view>
      <view class="school-content" v-if="list.showSpread">
        <view class="score-box">
          <view class="score-flex">
            <view class="text3">地区</view>
            <view class="text3">年份</view>
            <view class="text3">文科</view>
            <view class="text3">理科</view>
            <view class="text3">最低分</view>
            <view class="text3">详情</view>
          </view>
          <view>
            <view v-for="(item, index2) in list.info" :key="index2" class="score-flex" @tap="item.url?'seeDetail':''" :data-id="item.id" :data-type="item.type" :data-citycode="item.citycode" :data-title="item.nian" :data-url="item.url">
              <view class="text4">{{item.area}}</view>
              <view class="text4">{{item.nian}}</view>
              <view class="text4">{{item.wenke?item.wenke:'-'}}</view>
              <view class="text4">{{item.like1?item.like1:'-'}}</view>
              <view class="text4">{{item.lower?item.lower:'-'}}</view>
              <view class="text4" :style="'color:' + (item.url?'#5195DD':'#999999')">{{item.url?'详情':'暂无'}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
      </view>
      <!-- 导粉 -->
      <view class="daofen" v-if="daofen">
        <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
        </rich-text>
      </view>
    </view>
  </view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/gaokao/gkfenshuxian/school.js
//获取应用实例
const app = getApp();
const util = require("../../../../utils/util.js");
import fastnav from "../../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      showShare: true // 显示分享按钮
      ,
      quList: [],
      daofen: false,
      citycode: "",
      qrcodeimg: "",
      id: "",
      infoData: "",
      listData: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      id: options.id ? options.id : '',
      citycode: options.citycode ? options.citycode : ''
    });
    this.getquData(this.id, this.citycode);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.infoData ? this.infoData.title : "高考录取分数线查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.infoData ? this.infoData.title : "高考录取分数线查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20207/06/2020706100258_94734.png",
      query: {
        id: this.id
      }
    };
  },
  methods: {
    // 区域分数线
    getquData(id, citycode) {
      let data = {
        action: 'university',
        id: id,
        citycode: citycode
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "高考录取分数线查询"
        });

        if (res.data.data.area) {
          var quList = res.data.data.area.map(item => ({
            cityname: item,
            checked: false
          }));
          quList.unshift({
            cityname: "全部",
            checked: true
          });
          this.setData({
            quList
          });
        }

        let temparr = [];

        if (res.data.data.list) {
          res.data.data.list.forEach((v, k) => {
            if (k == 0) {
              v.showSpread = true;
            } else {
              v.showSpread = false;
            }
          });
        }

        this.setData({
          infoData: res.data.data,
          daofen: res.data.data.daofen,
          listData: res.data.data.list
        });
      });
    },

    // 区域点击按钮
    quselBtn(e) {
      let quname = e.currentTarget.dataset.name;
      this.quList.forEach((v, k) => {
        if (v.cityname == quname) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        quList: this.quList
      });
      let selContData = [];

      if (quname == "全部") {
        this.setData({
          listData: this.infoData.list
        });
      } else {
        selContData = this.infoData.list.filter(v => {
          if (v.qu.includes(quname)) {
            return v;
          }
        });
        this.setData({
          listData: selContData
        });
      }

      this.listData.forEach((v, k) => {
        if (k == 0) {
          v.showSpread = true;
        } else {
          v.showSpread = false;
        }
      });
      this.setData({
        listData: this.listData
      });
    },

    // 是否展开数据
    bindClick(e) {
      let index = e.currentTarget.dataset.index;
      this.listData.forEach((v, k) => {
        if (k == index) {
          v.showSpread = !v.showSpread;
        }
      });
      this.setData({
        listData: this.listData
      });
    },

    // 查看详情点击事件
    seeDetail(e) {
      let id = e.currentTarget.dataset.id;
      let citycode = e.currentTarget.dataset.citycode;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;
      let title = e.currentTarget.dataset.title;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
        });
      } else {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    }

  }
};
</script>
<style>
/* pages/topicality/gaokao/gkfenshuxian/school.wxss */
.main-img{width: 100%;height: 276rpx;}
.change-city{background:rgba(255,255,255,1);box-shadow:0rpx 6rpx 6rpx rgba(0,0,0,0.16);
opacity:1;border-radius:20rpx;padding:30rpx 0rpx;
margin-left: 36rpx;}
.change-city text{font-size:28rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(20,20,20,1);opacity:1;width: 130rpx;text-align: center;white-space:nowrap;}
/* 区域 */
.quyu-box{display: flex;flex-direction: row;align-items: flex-start;margin-left: 60rpx;flex-wrap: wrap;}
.qtitle{font-size: 30rpx;color: #666;font-weight: 600;font-family:PingFang SC;padding: 10rpx 0;white-space:nowrap; }
.qucont{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}
.qtext{font-size: 30rpx;color: #4e4e4e;text-align: center;padding: 10rpx; 
margin-right: 17rpx;margin-bottom: 17rpx;}
.qtextsel{font-size: 30rpx;color: #fff;text-align: center;border-radius: 20rpx;background-color: #5395de;padding: 10rpx;margin-right: 17rpx;margin-bottom: 17rpx;}
/* 内容 */
.xqcontent{margin: 50rpx 36rpx 80rpx 36rpx;}
.fenshu-box{margin-bottom: 30rpx;}
.school-title{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.school-box{display: flex;flex-direction: row;align-items: center;}
.school-box text{font-size:34rpx;font-family:PingFang SC;font-weight:bold;
line-height:44rpx;color:rgba(20,20,20,1);opacity:1;}
.school-box image{width: 18rpx;height: 26rpx;margin-right: 15rpx;}
.xqicon{width: 55rpx;height: 55rpx;}

.school-content{background:rgba(242,244,252,1);opacity:1;border-radius:20rpx;padding: 40rpx 36rpx 40rpx 36rpx;margin-top: 34rpx;}
.flex-row{display: flex;flex-direction: row;align-items: flex-start;}
.flex-col{display: flex;flex-direction: column;}
.text1{font-size:32rpx;font-family:PingFang SC;font-weight:500;
line-height:44rpx;color:rgba(20,20,20,1);opacity:1;white-space:nowrap;  }
.text2{font-size:32rpx;font-family:PingFang SC;font-weight:500;
line-height:44rpx;color:#5a5a5a;opacity:1;}
.score-box{margin:0;}
.score-flex{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.score{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.text3{font-size:30rpx;font-family:PingFang SC;font-weight:500;color:#999999;opacity:1;
margin-bottom: 30rpx; width: 100rpx;text-align: center;}
/* .text3:last-child{width: 120rpx;text-align: center;} */
.text4{font-size:30rpx;font-family:PingFang SC;font-weight:500;color:#000000;opacity:1;margin-bottom: 30rpx;width: 100rpx;text-align: center;}
/* .text4:last-child{width: 120rpx;text-align: center;} */



/* 导粉 */
.daofen{margin-bottom:80rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}
</style>